<template>
  <el-col :span="3.5">
    <el-menu
        :default-active="this.$route.path"
        router
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>账号相关</span>
        </template>
        <el-menu-item-group>
          <template slot="title">登陆注册</template>
          <el-menu-item index="1-1" route="/login" :disabled="login">登录</el-menu-item>
          <el-menu-item index="1-2" route="/register" :disabled="login">注册</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="查看个人信息">
          <el-menu-item index="1-3" route="/Mydata" :disabled="!login">个人中心</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="2" route="/passages" :disabled="!login">
        <i class="el-icon-menu"></i>
        <span slot="title">文章管理</span>
      </el-menu-item>
      <el-menu-item index="3" route="/user-admin" :disabled="!login">
        <i class="el-icon-document"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="4" route="/dynamic-admin" :disabled="!login">
        <i class="el-icon-setting"></i>
        <span slot="title">动态管理</span>
      </el-menu-item>

    </el-menu>
  </el-col>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "Aside",
  data() {
    return {};
  },
  computed: {
    ...mapState('userOptions', ['login'])
  },
  methods: {}
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 762px;
}
</style>
